// Customize these...
var n = 25,
    duration = 1.25;

// ...not these
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    img = new Image(),
    particles = [],
    particleNumber = 0,
    Particle = function(_i) {
      this.index = _i;
      this.draw = function() {
        ctx.globalAlpha = this.alpha;
        ctx.globalCompositeOperation = 'lighter';
        // if (particleNumber%5==0) ctx.drawImage(img, this.x, this.y, this.size, this.size*1.1);
        if (particleNumber%this.index==0) ctx.drawImage(img, this.x, this.y-2, this.size, this.size*1.3);
        ctx.drawImage(img, this.x, this.y, this.size, this.size);
      }
    };


function setParticle(p) {
  particleNumber++;
  var _size = rand(4, 12), // px width + height
      _dur = rand(duration, duration+(_size/10)),
      _tl = new TimelineMax()
            .fromTo(p, _dur, { x:rand(-_size, cw),
                               y:ch,
                               size:_size
                              },{
                               x:'+='+rand(_size*-10,_size*45),
                               y:-_size,
                               size:15,                               
                               ease:Sine.easeIn,
                               onComplete:function(){ setParticle(p); }
                              }, 0)
            //.fromTo(p,  _dur/3, {alpha:0.3}, {alpha:1, ease:Power1.easeInOut}, 0)
            .to(p,      _dur/4, {size:1}, _dur-_dur/4)
  if (particleNumber<n) _tl.seek(_dur*rand()); //fast forward on first run
}


// First run
for (var i=0; i<n; i++) {
    particles.push(new Particle(i));
    setParticle(particles[i]);      
}

TweenMax.ticker.addEventListener("tick", function(){
  ctx.clearRect(0, 0, cw, ch);
  for (var i=0; i<n; i++) particles[i].draw();
});

  
window.addEventListener('resize', function() {
  particleNumber = 0;  
  cw = (c.width = window.innerWidth);
  ch = (c.height = window.innerHeight);
  for (var i=0; i<n; i++) {
    TweenMax.killTweensOf(particles[i]);
    setParticle(particles[i]);
  }
});


function rand(min=0, max=1) {
  return min + (max-min)*Math.random();
}


img.src = "";